<template>
  <view class="popular-page">
    <u-navbar
      :title="$t('我的推广')"
      :border-bottom="false"></u-navbar>
    <view class="invite-info">
      <view class="invite-info-left">
        <text class="invite-info-left-0">{{$t('我的下级')}} <text>({{$t('人')}})</text></text>
        <view class="invite-info-left-1">{{ userInfo.xj_count }}</view>
      </view>
      <!-- <view class="invite-info-right">
				<view class="invite-info-right-0" @click="sharePoster">立即邀请</view>
				<view class="invite-info-right-1">邀请好友直接锁定为成员</view>
			</view> -->
    </view>
    <view class="invite-bottom">
      <view class="invite-bottom-view">
        <view class="invite-bottom-title">
          <view>{{$t('日期')}}</view>
          <view>{{$t('有效用户')}}</view>
          <view>{{$t('销售额')}}</view>
        </view>
        <view class="invite-bottom-scroll">
          <view
            class="invite-bottom-title invite-bottom-info"
            v-for="(item, idx) in list"
            :idx="idx">
            <view>{{ item.time }}</view>
            <view>{{ item.effective_xj_count }}</view>
            <view>{{ item.xj_consume }}</view>
          </view>
          <u-empty
            :text="$t('暂无记录')"
            :show="show"
            mode="order"
            margin-top="400"></u-empty>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { saveImageToPhotosAlbum } from "@/uni_modules/sakura-canvas/js_sdk/utils/util";
import PromotionPoster from "@/components/PromotionPoster.vue";
import NavBar from "@/uni_modules/zhouWei-navBar/components/zhouWei-navBar/zhouWei-navBar.vue";
import config from "@/utils/config.js";
export default {
  components: {
    NavBar,
    PromotionPoster,
  },
  data() {
    return {
      userInfo: {},
      share_url: "",
      list: [],
      show: false,
      page: 1,
      posterImage: "",
      showPoster: false,
    };
  },
  onLoad() {
    if (uni.getStorageSync("user")) {
      this.getUser();
      this.get_popularize_log();
      this.get_my_share_url();
    }
  },
  onShow() {
  	if (!uni.getStorageSync("user")) {
  		uni.redirectTo({
  			url:'/pages/my/login'
  		})
  	}
  },
  // 触底
  onReachBottom() {
    if (this.list.length < this.page * 10) {
      return;
    }
    this.page++;
    this.get_popularize_log();
  },

  methods: {
    //获取我的专属邀请URL
    get_my_share_url() {
      this.$http({
        url: "api/common/get_my_share",
        data: {
          share_ma: uni.getStorageSync("user").share_ma,
          // #ifdef H5
          type: 0,
          // #endif

          // #ifdef MP-WEIXIN
          type: 1,
          // #endif

          // #ifdef APP-PLUS
          type: 2,
          // #endif
        },
      })
        .then((res) => {
          console.log(res);
          if (res.data.code == 1) {
            this.share_url = res.data.data;
          }
        })
        .catch((err) => {});
    },
    sharePoster() {
      this.$refs.childCanvas.drawPoster();
    },
    back() {
      uni.navigateTo({
      	url:'/pages/tabBar/my'
      })
    },
    canvasSuccess(param) {
      const { showPoster, posterImage } = param;
      console.log(param, "paramparamparam");
      this.showPoster = showPoster;
      this.posterImage = posterImage;
    },
    async saveImage() {
      // #ifdef H5
      uni.showToast({
        title: this.$t('H5不支持API保存图片,请使用长按保存!!!'),
        icon: "none",
      });
      return;
      // #endif
      const res = await saveImageToPhotosAlbum(this.posterImage);
      console.log(res, "resss");
      if (!res.success) {
        uni.showToast({
          title: this.$t('保存图片失败'),
          icon: "none",
        });
        return;
      }
      this.showPoster = false;
    },
    getUser() {
      this.$http({
        url: "api/member/get_user_info",
      })
        .then((res) => {
          console.log(res);
          if (res.data.code == 1) {
            this.userInfo = res.data.data;
          }
        })
        .catch((err) => {});
    },
    get_popularize_log() {
      this.$http({
        url: "api/member/get_popularize_log",
        data: {
          page: this.page,
        },
      })
        .then((res) => {
          if (res.data.code == 1) {
            if (res.data.data.list.length == 0) {
              this.show = true;
            } else {
              this.show = false;
            }
            this.list = this.list.concat(res.data.data.list);
          } else {
            this.$tip.tip(res.data.msg);
            this.show = true;
          }
        })
        .catch((err) => {});
    },
    // 复制链接
    copy() {
      let dizhi = decodeURIComponent(this.share_url);
      uni.setClipboardData({
        data: dizhi,
        success: () => {
          this.$tip.tip(this.$t('复制成功'));
        },
      });
    },
  },
};
</script>

<style>
page {
  background-color: rgb(248, 248, 248);
}
</style>
<style lang="scss" scoped>
.invite-info {
  width: 750rpx;
  height: 200rpx;
  background-image: linear-gradient(to top right, #fff, #fff, #ddf9fa);
  // background: linear-gradient(to top right,#fff,#7FFFA0);
  display: flex;
  justify-content: space-between;
  padding: 30rpx;
  box-sizing: border-box;
  .invite-info-left-0 {
    font-size: 30rpx;
    text {
      font-size: 26rpx;
    }
  }
  .invite-info-left-1 {
    font-size: 76rpx;
    font-weight: bold;
    margin-top: 12rpx;
  }
  .invite-info-right {
    padding-top: 20rpx;
    .invite-info-right-0 {
      width: 140rpx;
      height: 50rpx;
      font-size: 24rpx;
      background-image: linear-gradient(to bottom right, #7fffa0, #00fa9a);
      border-radius: 30rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #444;
    }
    .invite-info-right-1 {
      margin-top: 16rpx;
      color: #888;
      font-size: 20rpx;
    }
  }
}
.invite-bottom {
  width: 690rpx;
  margin: 30rpx auto;
  .invite-bottom-view {
    background-color: #fff;
    margin: 0 auto;
    margin-top: 30rpx;
    border-radius: 20rpx;
    overflow: hidden;
  }
}
.invite-bottom-title {
  height: 80rpx;
  align-items: center;
  display: flex;
  background-color: rgb(210, 239, 195);
  view {
    width: calc(100% / 3);
    text-align: center;
    font-size: 30rpx;
  }
}
.invite-bottom-info {
  background-color: #fff;
  view {
    font-size: 26rpx;
    color: #6e6e6e;
  }
}
.poster-box {
  width: 650rpx;
  background-color: #fff;
  border-radius: 30rpx;
  overflow: hidden;
  padding: 30rpx;
  box-sizing: border-box;
  .btn-share {
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 20rpx 80rpx;
    margin-top: 50rpx;
    .button {
      background: #845ec2;
      padding: 0 30rpx;
      height: 70rpx;
      font-size: 26rpx;
      color: #fff;
      border-radius: 30rpx;
      text-align: center;
      line-height: 70rpx;
    }
  }
}
.poster-box-title {
  font-size: 38rpx;
  color: #000;
  text-align: center;
  height: 100rpx;
  line-height: 100rpx;
}
.poster-box-close {
  text-align: right;
  padding: 20rpx;
}
.poster-box-img {
  width: 400rpx;
  margin: 0 auto;
  image {
    width: 100%;
    height: 100%;
  }
}
.save-button {
  background: #845ec2;
  width: 400rpx;
  height: 70rpx;
  font-size: 26rpx;
  color: #fff;
  border-radius: 30rpx;
  text-align: center;
  line-height: 70rpx;
  margin: 60rpx auto;
}
</style>
